{% extends 'base.html' %}
{% block title %}
    {{ html_title }}
{% endblock title %}

{% block body %}
<div class="container-fluid">
    <div class='col-md-8'>
        {# 显示设备名称与备份日期 #}
        <br><h2 style="color: #666666">{{ devicename }} {{ date }}配置备份</h2><br>
    </div>
    <div class='col-md-8'>
        <form>
            <div class="form-group" align="center">
                {# 使用textarea展示多行(10行)文本内容, readonly为只读 #}
                <textarea rows="10" class="form-control" readonly id="textarea" >{{ config }}</textarea>
            </div>
        </form>
        <br>
        {# 点击触发一键复制到剪贴板JavaScript copy() #}
        <button onclick="copy()">复制到剪贴板</button>
    </div>
</div>
{# 一键复制到剪贴板JavaScript copy() #}
<script type="text/javascript" language="javascript">
    function copy() {
      // 找到id为textarea的区域
      let textarea = document.getElementById("textarea");
      // 全选
      textarea.select();
      // 复制到剪贴板
      document.execCommand("copy");
    }
</script>
{% endblock body %}